<template>
  <div class="aaa">
    <div class="tip" ref="tip">
      <div class="collect">
        <div class="collectItem" title="收起便签">
          <i class="el-icon-minus"></i>
        </div>
        <div class="collectItem" title="添加便签" @click="addTip">
          <i class="el-icon-document-add"></i>
        </div>
        <div class="collectItem" title="管理便签">
          <i class="el-icon-folder-opened"></i>
        </div>
        <div class="collectItem" title="复制便签">
          <i class="el-icon-copy-document"></i>
        </div>
        <div class="collectItem" title="删除便签内容">
          <i class="el-icon-delete"></i>
        </div>
      </div>
      <div class="write">
        <div class="title" @mousedown="onTipMousedown">记下你的所思所感</div>
        <div class="content" :contenteditable="true" @input="divInput">
          dfds
        </div>
      </div>
    </div>
    <div class="ppp"></div>
    <!-- <tip></tip> -->
  </div>
</template>
<script lang="ts">
import { data1 } from "../testData";
import { ref, onMounted, Ref, nextTick } from "vue";
import { useMainStore } from "@/stores/main";
import api from "../api/api";
import Tip from "@/components/Tip/Tip.vue";
import useDrag from "@/share/hooks/useDrag";
export default {
  setup() {
    onMounted(() => {
      useDrag(".primary-main-view", ".ppp", { top: 60, left: 0 });
    });
    const store = useMainStore();
    const tip: Ref<null | HTMLElement> = ref(null);
    function onTipMousedown(e) {
      document.onmousemove = (e) => {
        const left = parseInt(
          window.getComputedStyle(tip.value as HTMLElement).left
        );
        const top = parseInt(
          window.getComputedStyle(tip.value as HTMLElement).top
        );
        tip.value &&
          (tip.value.style.left = e.movementX + left + "px") &&
          (tip.value.style.top = e.movementY + top + "px");
      };
    }
    document.onmouseup = function (e) {
      console.log("document");
      document.onmousemove = null;
    };
    /* 添加便签 */
    function addTip() {
      console.log("addTip", tip.value);
      console.log((tip.value as HTMLElement).innerHTML);
      api
        .addTip({
          content: (tip.value as HTMLElement).innerHTML,
          author: store.user._id,
        })
        .then((res) => {
          console.log("addTip", res);
        })
        .catch((err) => {
          console.log("addTip", err);
        });
    }
    function divInput(e) {
      console.log("divInput", e.target.innerHTML);
    }
    return {
      tip,
      onTipMousedown,
      addTip,
      divInput,
    };
  },
  components: {
    // Tip
  },
};
</script>
<style lang="scss" scoped>
.ppp {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
}
.aaa {
  height: 1000px;
}
.tip {
  position: absolute;
  top: 100px;
  left: 100px;
  box-shadow: 4px 4px 4px 0px #ccc;
  width: 350px;
  &::after {
    clear: both;
    content: "";
    display: block;
  }
}
/* 书写部分 */
.write {
  width: 300px;
  float: right;
}
.title {
  line-height: 40px;
  background: gold;
  height: 40px;
  text-align: center;
  text-shadow: 2px 2px 2px grey;
  cursor: all-scroll;
}
// 滚动条
.content {
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1); /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
  scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
  -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  &::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
  overflow-y: auto;
  overflow-x: hidden;
  background: khaki;
  height: 220px;
  padding: 10px;
  outline: none;
}
/* 收藏部分 */
.collect {
  width: 50px;
  height: 280px;
  background: rgb(241, 184, 78);
  float: right;
}
.collectItem {
  width: 50px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 20px 0 20px 0;
  background: rgb(181, 226, 90);

  &:hover {
    color: #409eff;
    cursor: pointer;
  }
}
.collectItem + .collectItem {
  margin-top: 20px;
}
</style>
